<template>
  <van-cell>
    <!-- 使用 title 插槽来自定义标题 -->
    <template #title>
      <div class="title">
        <span>{{ obj.title }}</span>
        <!-- 单图 -->
        <!-- <van-image v-if="obj.cover.type === 1" class="thumb" :src="obj.cover.images[0]" lazy-load>
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image> -->

        <!-- 使用懒加载 -->
        <img v-if="obj.cover.type === 1" class="thumb" :src="obj.cover.images[0]" v-lazy="obj.cover.images[0]" />

      </div>

      <!-- 多图 -->
      <div class="thumb-box" v-if="obj.cover.type > 1">
        <!-- <van-image class="thumb" :src="item" :key="index" v-for="(item, index)  in obj.cover.images">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image> -->
        <!-- 使用懒加载 -->
        <img class="thumb" :src="item" :key="index" v-for="(item, index)  in obj.cover.images" v-lazy="item">
      </div>
    </template>

    <template #label>
      <div class="box">
        <div class="lable-box">
          <span>{{ obj.aut_name }}</span>
          <span>{{ obj.comm_count }}评论</span>
          <span>{{ formatTime(obj.pubdate) }}</span>
        </div>
        <!-- 反馈按钮需要阻止事件冒泡避免触发默认事件 -->
        <van-icon name="cross" @click.stop="del(obj.art_id)" size="18" v-if="isShow" />
      </div>
    </template>
    <!-- 需要用get-container修改蒙层的挂载点否则没办法显示 -->
    <van-action-sheet @cancel="onCancel" :cancel-text="canCelText" v-model="show" get-container="body"
      :actions="actions" @select="onSelect" />
    <van-dialog v-model="show2" title="标题" show-cancel-button getContainer="body" @confirm="confirm()"
      @cancel="remark = ''">
      <van-field v-model="remark" placeholder="附加说明" />
    </van-dialog>
  </van-cell>

</template>

<script>
import { mapState } from 'vuex'
import Notify from '@/ui/Notify'
export default {
  computed: {
    ...mapState(['firstActions', 'secondActions'])
  },
  props: {
    obj: Object,
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      show: false,
      show2: false,
      actions: [],
      canCelText: '取消',
      id: '',
      remark: ''
    }
  },
  created () {
    this.actions = this.firstActions
  },
  methods: {
    formatTime (e) {
      return this.$utils.timeAgo(e)
    },

    del (e) {
      this.id = e
      this.actions = this.firstActions
      this.canCelText = '取消'
      this.show = true
    },

    async onSelect (item) {
      if (item.name === '反馈垃圾内容') {
        this.actions = this.secondActions
        this.canCelText = '返回'
      } else if (item.name === '不感兴趣') {
        try {
          const { data: res } = await this.$api.articleDislikesAPI({ target: this.id })
          Notify({ type: 'success', message: res.message })
        } catch (error) {
          Notify({ type: 'danger', message: error.code })
        }
      } else if (item.value === 0) {
        this.show2 = true
      } else if (this.actions === this.secondActions && item.value !== 0) {
        const { data: res } = await this.$api.articleReportsAPI({ target: this.id, type: item.value })
        Notify({ type: 'success', message: res.message })
      }

      if (item.name !== '反馈垃圾内容' && item.name !== '返回' && item.name !== '其它问题') {
        this.show = false
      } else {
        this.show = true
      }
    },

    onCancel () {
      if (this.canCelText === '返回') {
        this.del()
      } else {
        this.show = false
      }
    },

    async confirm () {
      if (this.remark === '') {
        Notify({ type: 'danger', message: '反馈内容不能为空' })
      } else {
        const { data: res } = await this.$api.articleReportsAPI({
          target: this.id,
          type: 0,
          remark: this.remark
        })
        Notify({ type: 'success', message: res.message })
        this.show = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  width: 340px;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}

/deep/ .van-cell__title {
  flex: inherit;
}

.box {
  display: flex;
  justify-content: space-between;

  .lable-box {
    display: flex;
    justify-content: left;

    span {
      margin-right: 10px;
    }
  }
}

.thumb {
  width: 113px;
  height: 70px;
  background: #f8f8f8;
  object-fit: contain;
}
</style>
